<template>
  <view class="settlement-statistics">
    <!-- 总收益卡片 -->
    <view class="total-earning-card">
      <view class="card-title">💰 总收益</view>
      <view class="earning-amount">¥ {{ statistics.totalEarning || 0 }}</view>
      <view class="earning-desc">累计接单收益</view>
    </view>

    <!-- 收益明细 -->
    <view class="earning-details">
      <view class="section-title">📊 收益明细</view>
      <view class="detail-grid">
        <view class="detail-item">
          <view class="item-label">已结算</view>
          <view class="item-value settled">¥ {{ statistics.settledEarning || 0 }}</view>
        </view>
        <view class="detail-item">
          <view class="item-label">未结算</view>
          <view class="item-value unsettled">¥ {{ statistics.pendingEarning || 0 }}</view>
        </view>
        <view class="detail-item">
          <view class="item-label">申请中</view>
          <view class="item-value applying">¥ {{ statistics.applyingEarning || 0 }}</view>
        </view>
      </view>
    </view>

    <!-- 接单统计 -->
    <view class="order-stats">
      <view class="section-title">📈 接单统计</view>
      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-value">{{ statistics.totalOrders || 0 }}</view>
          <view class="stat-label">接单总数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ statistics.completedOrders || 0 }}</view>
          <view class="stat-label">完成订单</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ completionRate }}%</view>
          <view class="stat-label">完成率</view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="btn-records" @click="handleViewRecords">查看结算记录</button>
    </view>

    <!-- 提示信息 -->
    <view class="tips">
      <view class="tip-title">💡 温馨提示</view>
      <view class="tip-item">• 订单完成后可申请结算</view>
      <view class="tip-item">• 管理员将在24小时内审核</view>
      <view class="tip-item">• 审核通过后线下转账到您的账户</view>
    </view>
  </view>
</template>

<script>
import { getSettlementStatistics } from '@/api/pickup'

export default {
  data() {
    return {
      statistics: {}
    }
  },
  computed: {
    // 完成率
    completionRate() {
      if (!this.statistics.totalOrders || this.statistics.totalOrders === 0) {
        return 0
      }
      return Math.round((this.statistics.completedOrders / this.statistics.totalOrders) * 100)
    }
  },
  onLoad() {
    this.loadStatistics()
  },
  onShow() {
    // 从结算记录返回时刷新数据
    this.loadStatistics()
  },
  methods: {
    // 加载统计数据
    async loadStatistics() {
      try {
        uni.showLoading({ title: '加载中...' })
        const s = await getSettlementStatistics()
        this.statistics = {
          totalEarning: Number(s?.totalEarnings || 0),
          settledEarning: Number(s?.settledEarnings || 0),
          pendingEarning: Number(s?.unsettledEarnings || 0),
          applyingEarning: Number(s?.applyingEarnings || 0),
          totalOrders: Number(s?.totalOrders || 0),
          completedOrders: Number(s?.completedOrders || 0)
        }
      } catch (error) {
        console.error('加载统计失败:', error)
        uni.showToast({ title: error.msg || '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },

    // 查看结算记录
    handleViewRecords() {
      uni.navigateTo({
        url: '/pages/settlement/records'
      })
    }
  }
}
</script>

<style scoped>
.settlement-statistics {
  min-height: 100vh;
  padding: 24rpx;
  background: #F5F5F5;
}

.total-earning-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.card-title {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16rpx;
}

.earning-amount {
  font-size: 72rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.earning-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.earning-details {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.detail-item {
  text-align: center;
  padding: 24rpx;
  background: #F8F9FA;
  border-radius: 12rpx;
}

.item-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.item-value {
  font-size: 32rpx;
  font-weight: bold;
}

.item-value.settled {
  color: #4CAF50;
}

.item-value.unsettled {
  color: #FF9800;
}

.item-value.applying {
  color: #2196F3;
}

.order-stats {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.stat-item {
  text-align: center;
  padding: 24rpx;
  background: #F8F9FA;
  border-radius: 12rpx;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #4ECDC4;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.action-buttons {
  margin-bottom: 24rpx;
}

.btn-records {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  border: none;
}

.tips {
  background: #FFF9E6;
  border-radius: 16rpx;
  padding: 32rpx;
}

.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF9800;
  margin-bottom: 16rpx;
}

.tip-item {
  font-size: 24rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 8rpx;
}

.tip-item:last-child {
  margin-bottom: 0;
}
</style>

